<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../../header.jsp"%>

<script type="text/javascript" src="<%=ctx%>/js/jquery.bootstrap-carousel.js"></script>
<script type="text/javascript" src="<%=ctx%>/js/jquery.bootstrap-transition.js"></script>
<script type="text/javascript">

function loadPhotos(){
	if ($("#photoPanel").data("loaded")) {
		return;
	}
	
	$("#photoCarousel").show();
	$("#photoNotExistsDiv").hide();
	
	var taskId = $("#taskId").val();
	$.ajax({
		type: "GET",
		cache: false,
		url: "attachment/list.json?resourceId=" + taskId,
		dataType: "json",
		success: loadPhotosSucceedCallback,
		error:function(message){
			$.alert(message);
		}
	});

	$("#photoPanel").data("loaded",true);
}

function loadMap() {
	if ($("#mapPanel").data("loaded")) {
		return;
	}
	
	initMap();

	$("#mapPanel").data("loaded",true);
}
	
$(document).ready(function() {
//	$("#tabs").tab("show");
	$('a[data-toggle="tab"]').on('shown', function (e) {
		var actived = $(e.target).attr("href");
		if(actived == "#photoPanel"){
			loadPhotos();
		} else if (actived == "#mapPanel") {
			loadMap();
		}
	});
});
</script>

<div class="border bg">

<div class="page-header">
	<h2>查看考勤<small id="taskTitle"></small></h2>
</div>


<div id="tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#detailPanel" data-toggle="tab">基本信息</a></li>
<li><a href="#photoPanel" data-toggle="tab">考勤照片<small id="photoIndex"></small></a></li>
<li><a href="#mapPanel" data-toggle="tab">考勤地图</a></li>
</ul>

<div class="tab-content">
<div id="detailPanel" class="tab-pane fade in active">
	<%@ include file="detail.detail.jsp"%>
</div>

<div id="photoPanel" class="tab-pane fade">
	<jsp:include page="detail.photo.jsp"/>
	<div class="well" id="photoNotExistsDiv">
		此考勤未完成，尚未有照片信息！
	</div>
</div>

<div id="mapPanel" class="tab-pane fade">
	<jsp:include page="detail.map.jsp"/>
</div>

</div>
</div>

</div>


<%@ include file="../../footer.jsp"%>